<template>
  <div>
    <div class="chart-card chart-card-box">
      <div class="income-pay-chart-header">
        <div class="hearder-title">收支结构分析</div>
        <div class="header-select">
          <span>统计来源：</span>
          <el-select
            :value="dataSource"
            placeholder="选择统计来源"
            @change="handleSelectChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="income-pay-chart-content">
        <!-- 图表 -->
        <div class="income-pay-warp flex-space-between">
          <div class="income-pay-child">
            <div class="child-header">
              <div class="flex-space-between">
                <div class="title">总收入 ¥{{incomeCount}}</div>
                <chart-download 
                  :chart-type="chartType"
                  type="INCOMEPIE"/>
              </div>
              
              <div class="compared">
                <span>
                  环比 
                  <i class="iconfont" :class="comparedStyle(incomeRingRatio > 0)">{{incomeRingRatio}}%</i>
                </span>
                <span>
                  同比 
                  <i class="iconfont" :class="comparedStyle(incomeCompared > 0)">{{incomeCompared}}%</i>
                </span>
              </div>
            </div>
            
            <pie-annular-chart
              :chart-data="incomePayData.incomeData"
              id="IncomePiechart"
            />
          </div>

          <div class="income-pay-child">
            <div class="child-header">
              <div class="flex-space-between">
                <div class="title">总支出 ¥{{payCount}}</div>
                <chart-download 
                  :chart-type="chartType"
                  type="PAYPIE"/>
              </div>
              
              <div class="compared">
                <span>
                  环比 
                  <i class="iconfont" :class="comparedStyle(payRingRatio > 0)">{{payRingRatio}}%</i>
                </span>
                <span>
                  同比 
                  <i class="iconfont" :class="comparedStyle(payCompared > 0)">{{payCompared}}%</i>
                </span>
              </div>
            </div>
            
            <pie-annular-chart
              :chart-data="incomePayData.payData"
              id="PayPieChart"
            />
          </div>
        </div>

        <div class="profit-content">
          <div class="profit-child flex-start">
            <div class="title">总利润 <span>¥{{profitCount}}</span></div>
            <div class="title">利润率 <span>{{profitRate}}%</span></div>
          </div>
          <div class="profit-child flex-space-between">
            <div class="compared">
              <span>
                环比 
                <i class="iconfont" :class="comparedStyle(profitRingRatio > 0)">{{profitRingRatio}}%</i>
              </span>
              <span>
                同比 
                <i class="iconfont" :class="comparedStyle(profitCompared > 0)">{{profitCompared}}%</i>
              </span>
            </div>
            <div class="flex-space-between">
              <el-select
                :value="selectType"
                clearable
                placeholder="全部"
                @change="handleSelectRatioChange"
              >
                <el-option
                  v-for="item in profitOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <chart-download 
                :chart-type="chartType"
                type="PIEPROFIT"/>
            </div>
          </div>
          <div class="pie-profit-chart-content">
            <pie-profit-chart
              :chart-data="incomePayData.totalProfit"
            />
          </div>
          
        
        </div>

      </div>
    </div>
		
    
    <div class="chart-card chart-card-box">
      <div class="team-ranking-chart-content">
        <div class="header-content flex-space-between">
          <div class="hearder-title">团队排行榜</div>
          <div>
            <el-select
              :value="selectName"
              clearable
              placeholder="全部"
              @change="handleSelectRankingChange"
            >
              <el-option
                v-for="item in profitOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>

    
        <div class="ranking-chart-child flex-space-between">
          <div class="chart-wrap">
            <bar-ranking-chart
              title="部门收入排行"
              :chart-type="chartType"
              :chart-data="teamIncomeData"
              id="TeamIncome"
              :has-next-page="hasNextPageMap.teamIncome"
              type="TEAMINCOME"
              @fetchTableData="fetchIncomeTableData"
              @categoryMore="categoryMore('teamIncome')"
            />
          </div>
          <div class="chart-wrap">
            <bar-ranking-chart
              title="部门利润排行"
              :chart-type="chartType"
              :chart-data="teamProfitData"
              id="TeamProfit"
              :has-next-page="hasNextPageMap.teamProfit"
              type="TEAMPROFIT"
              @fetchTableData="fetchProfitTableData"
              @categoryMore="categoryMore('teamProfit')"
            />
          </div>
        </div>

        <div v-show="isShowDrillDown" class="header-content flex-space-between">
          <div class="hearder-title"></div>
          <div class="fold-table">
            <el-button @click="foldTable" plain>收起</el-button>
          </div>
        </div>

        <div v-show="isShowDrillDown" class="ranking-chart-child flex-space-between">
          <div class="chart-wrap">
            <bar-ranking-chart
              :title="staffIncomeRankingTitle"
              :chart-type="chartType"
              :chart-data="staffIncomeData"
              id="staffIncome"
              :has-next-page="hasNextPageMap.staffIncome"
              type="STAFFINCOME"
              :is-drill-down="isShowDrillDown"
              @categoryMore="categoryMore('staffIncome')"
            />
          </div>
          <div class="chart-wrap">
            <bar-ranking-chart
              :title="staffProfitRankingTitle"
              :chart-type="chartType"
              :chart-data="staffProfitData"
              id="staffProfit"
              :has-next-page="hasNextPageMap.staffProfit"
              type="STAFFPROFIT"
              :is-drill-down="isShowDrillDown"
              @categoryMore="categoryMore('staffProfit')"
            />
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import * as echarts5 from 'echarts5';
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
import {
  PieAnnularChart,
  PieProfitChart
} from './index.ts';
import BarRankingChart from './BarRankingChart.vue'
import {
  ChartDownload
} from './common/index';
/* mixins */
import ChartsMixin from '@src/modules/report/managementReport/charts/components/mixins/charts.mixins';

export default {
  name: 'income-pay-chart',
  mixins: [ChartsMixin],
  props: {
    chartType: {
      type: String,
			default: ''
    },
    incomePayData: {
      type: Object,
      default: () => ({})
    },
    rankingMap: {
      type: Object,
      default: () => ({})
    },
		title: {
			type: String,
			default: ''
		},
    chartOption: {
      type: Object || String,
    },
  },
  data() {
    return {
      options: [
        {
          value: '0',
          label: '已完成工单'
        },
        {
          value: '1',
          label: '已结算工单'
        }
      ],
      profitOptions: [
        {
          value: '1',
          label: '备件'
        },
        {
          value: '2',
          label: '服务项目'
        }
      ]
    }
  },
  computed: {
		dataSource() {
      return this.chartOption?.dataSource || '1'
    },
    selectType() {
      return this.chartOption?.selectType || ''
    },
    selectName() {
      return this.chartOption?.selectName || ''
    },
    teamIncomeData() {
      return this.rankingMap.teamIncome.data || []
    },
    teamProfitData() {
      return this.rankingMap.teamProfit.data || []
    },
    staffIncomeData() {
      return this.rankingMap.staffIncome.data || []
    },
    staffProfitData() {
      return this.rankingMap.staffProfit.data || []
    },
    hasNextPageMap() {
      return {
        teamIncome: this.rankingMap.teamIncome.hasNextPage,
        teamProfit: this.rankingMap.teamProfit.hasNextPage,
        staffIncome: this.rankingMap.staffIncome.hasNextPage,
        staffProfit: this.rankingMap.staffProfit.hasNextPage
      }
    }
	},
  setup(props, { emit }) {
    const chartData = computed(() => {
			return props.incomePayData
		})
		watch(chartData, (n,o) => {
			initData()
		})
    const isShowDrillDown = ref(false)
    // 收入 支出
    const incomeCount = ref(null)
    const incomeCompared = ref(null)
    const incomeRingRatio = ref(null)
    const payCount = ref(null)
    const payCompared = ref(null)
    const payRingRatio = ref(null)
    // 利润
    const profitCount = ref(null)
    const profitRate = ref(null)
    const profitCompared = ref(null)
    const profitRingRatio = ref(null)
    // title
    const staffIncomeRankingTitle = ref('')
    const staffProfitRankingTitle = ref('')

    const initData = () => {
      const { incomeData, payData, totalProfit } = chartData.value
      incomeCount.value = incomeData?.countNums
      incomeCompared.value = incomeData?.compared
      incomeRingRatio.value = incomeData?.ringRatio
      payCount.value = payData?.countNums
      payCompared.value = payData?.compared
      payRingRatio.value = payData?.ringRatio

      profitCount.value = totalProfit?.profitCount
      profitRate.value = totalProfit?.profitRate
      profitCompared.value = totalProfit?.compared
      profitRingRatio.value= totalProfit?.ringRatio

    }

    // 选择统计来源
    const handleSelectChange = value => {
      const newValue = {
        ...props.chartOption,
        dataSource: value
      }
      emit('fetchChartData', newValue, 'incomePayChart')
    }

    // 选择利润率
    const handleSelectRatioChange = value => {
      const newValue = {
        ...props.chartOption,
        selectType: value
      }
      emit('fetchChartData', newValue, 'ratioChart');
    }

    // 选择排行榜
    const handleSelectRankingChange = value => {
      const newValue = {
        ...props.chartOption,
        selectName: value
      }
      emit('fetchChartData', newValue, 'rankingChart');
    }

    const categoryMore = value => {
      emit('categoryMore', value)
    }

    const foldTable = () => {
      isShowDrillDown.value = false
    }

    const fetchTableData = (value, chartType) => {
      isShowDrillDown.value = true
      const newValue = {
        ...props.chartOption,
        tagId: value?.data?.staffId
      }
      emit('fetchTableData', newValue, chartType)
    }

    const fetchIncomeTableData = value => {
      staffIncomeRankingTitle.value = `${value?.name} - 人员收入排行榜`
      fetchTableData(value, 'teamIncome')
    }

    const fetchProfitTableData = value => {
      staffProfitRankingTitle.value = `${value?.name} - 人员利润排行榜`
      fetchTableData(value, 'teamProfit')
    }

    const comparedStyle = (flag)=>{
      let styleArr = [];

      if(flag){
        styleArr = ['color00af49', 'icon-long-arrow-up'];
      }else {
        styleArr = ['colorFF7043', 'icon-long-arrow-down'];
      }
      return styleArr;
    }


    
    onMounted(() => {

    })

    onUnmounted(() => {
      
    })
    
    return {
      incomeCount,
      incomeCompared,
      incomeRingRatio,
      payCount,
      payCompared,
      payRingRatio,
      profitCount,
      profitRate,
      profitCompared,
      profitRingRatio,
      isShowDrillDown,
      handleSelectChange,
      handleSelectRatioChange,
      handleSelectRankingChange,
      foldTable,
      fetchIncomeTableData,
      fetchProfitTableData,
      categoryMore,
      staffIncomeRankingTitle,
      staffProfitRankingTitle,
      comparedStyle
		}
  },
  components: {
		[PieAnnularChart.name]: PieAnnularChart,
    [BarRankingChart.name]: BarRankingChart,
    [PieProfitChart.name]: PieProfitChart,
    ChartDownload
	}
};
</script>

<style lang="scss" scoped>
.colorFF7043{
  color: #d6461a;
}
.color00af49{
  color: #00af49;
}
.flex-space-between {
  display: flex;
  justify-content: space-between;
}
.hearder-title {
  font-size: 16px;
  font-weight: bold;
}
.title {
  font-weight: bold;
}
.chart-card {
  margin-bottom: 16px;
}
.fold-table {
  height: 60px;
  line-height: 60px;
}
.income-pay-chart-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  .header-select {
    margin-left: auto;
  }
}
.income-pay-chart-content {
  margin-bottom: 20px;
  .income-pay-warp {
    .income-pay-child {
      width: 100%;
      .child-header {
        padding: 10px 20px 0;
      }
    }
  }
  .income-pay-chart {
    width: 100%;
    min-height: 300px;
  }
  .profit-content {
    width: 500px;
    margin: 0 auto;
    .flex-start {
      display: flex;
      >div:first-child {
        margin-right: 10px;
      }
    }
    .profit-child {
      margin-bottom: 10px;
      .el-select {
        margin-right: 2%;
      }
    }
    .pie-profit-chart-content {
      width: 500px;
      margin: 0 auto;
    }
  }
}

.ranking-chart-child {
  .chart-wrap {
    width: 50%;
    text-align: center;
    height: 560px;
    margin-right: 20px;
  }
}

.compared {
  color: #8c8c8c;
  .iconfont {
    font-size: 12px;
  }
}
</style>
